/*
 * @Author: sbotlp
 * @Date: 2019-07-03 13:40:10
 * @Last Modified by: sbotlp
 * @Last Modified time: 2019-07-03 15:02:42
 */
import * as React from 'react';
import { Button, Row } from 'antd';
import { Card } from '../component/card/Card';
import { SInput } from '../component/form/input/Input';
import { STextArea } from '../component/form/textArea/TextArea';
import { SInputNumber } from '../component/form/inputNumber/InputNumber';
import { SDatePicker } from '../component/form/datePicker/DatePicker';
import { SRangePicker } from '../component/form/rangePicker/RangePicker';
import { SSelect } from '../component/form/select/Select';
import { withRouter } from 'src/app/routers/WithRouter';
import { FormMenuService } from './FormMenu.service';
interface Props extends React.Props<any> {
  history?: any
}
@withRouter
export default class  FormMenuComponent extends React.PureComponent<Props, any> {
  private service: FormMenuService;
  constructor(props) {
    super(props);
    this.service = new FormMenuService();
    this.state = {
      sub: {},
      error: {}
    }
  }
  goBack = (): void => {
    this.props.history.goBack();
  }
  onChange = (value: any, key: any): void => {
    const { sub } = this.state;
    const data = this.assignState(sub, value, key);
    this.setState({sub: {...data}});
  }
  submit = (): void => {
    const { sub } = this.state;
    console.log('sub: ', sub);
    this.setState({error: {}});
    this.service.save(sub).then(res => {
      console.log('res: ', res);
    }).catch(error => {
      this.setState({error: {...error.err}});
    })
  }
  assignState = (targetState: object, value: any, key: any): object => {
    const newObject = new Object;
    newObject[key] = value;
    return Object.assign(targetState, newObject);
  }
  render() {
    const { sub, error } = this.state;
    return (
      <div className='form-menu'>
        <Card>
          <Button type='ghost' onClick={this.goBack}>返回</Button>
          <Button type='primary' onClick={this.submit}>提交</Button>
        </Card>
        <Card title={<span>表单封装演示</span>}>
          <Row gutter={24}>
            <SInput
              col={12}
              modelKey='input'
              allowClear={true}
              required={true}
              label='SInput'
              error={error.input}
              value={sub.input}
              placeholder='占位符'
              onChange={(value, key) => this.onChange(value, key)}
            />
            <SInput
              col={12}
              modelKey='input1'
              required={true}
              label='SInput1'
              error={error.input1}
              value={sub.input1}
              placeholder='占位符'
              onChange={(value, key) => this.onChange(value, key)}
            />
          </Row>
          <Row gutter={24}>
            <SInputNumber
              col={12}
              required={true}
              modelKey='SInputNumber'
              label='SInputNumber'
              min={0}
              max={20}
              error={error.SInputNumber}
              value={sub.SInputNumber}
              placeholder='占位符'
              onChange={(value , key) =>  this.onChange(value, key)}
            />
            <SSelect
              col={12}
              required={true}
              modelKey='SSelect'
              label='SSelect'
              error={error.SSelect}
              value={sub.SSelect}
              options={[
                {label: '请选择', data: ''},
                {label: 'sbotlp', data: 'sbotlp'},
                {label: 'lp', data: 'lp'}
              ]}
              onChange={(value , key) =>  this.onChange(value, key)}
            />
          </Row>
          <Row gutter={24}>
            <SDatePicker
              col={12}
              required={true}
              modelKey='SDatePicker'
              label='SDatePicker'
              error={error.SDatePicker}
              value={sub.SDatePicker}
              placeholder='请选择时间'
              onChange={(value , key) =>  this.onChange(value, key)}
            />
            <SRangePicker
              col={12}
              required={true}
              modelKey='SRangePicker'
              label='SRangePicker'
              error={error.SRangePicker}
              value={sub.SRangePicker}
              placeholder={['请选择开始时间', '请选择结束时间']}
              onChange={(value , key) =>  this.onChange(value, key)}
            />
          </Row>
        </Card>
        <Card title={<span>多行输入框封装演示</span>}>
          <Row gutter={24}>
            <STextArea
              col={24}
              modelKey='textAreaVaule'
              required={true}
              label='TextArea'
              error={error.textAreaVaule}
              value={sub.textAreaVaule}
              placeholder='占位符'
              onChange={(value, key) => this.onChange(value, key)}
            />
            <STextArea
              col={24}
              modelKey='textAreaVaule1'
              label='TextArea1'
              autosize={{ minRows: 2, maxRows: 6 }}
              error={error.textAreaVaule1}
              value={sub.textAreaVaule1}
              placeholder='autosize={{ minRows: 2, maxRows: 6 }}'
              onChange={(value, key) => this.onChange(value, key)}
            />
          </Row>
        </Card>
      </div>
    )
  }
}
